//导入pinia
import { ElMessage } from 'element-plus'
import { defineStore } from 'pinia'
import { ref } from 'vue'
//创建websocket状态存储
export const useWebSocketStore = defineStore('webSocket', () => {
    const time = ref(new Date().toLocaleTimeString()) //当前时间
    const theme = ref('light') //默认主题为light
    const message = ref('') //消息
    const socket = ref(null) //websocket实例
    const serverMessage = ref([]) //服务器消息记录
    const avatar = ref(null) //用户头像
    const imageSrc = ref([]) // 用于存储 Base64 数据的响应
    const textareaContent = ref([]) // 用于存储 textarea 内容
    // 连接websocket
    const connect = (url) => {
        socket.value = new WebSocket(url)
        socket.value.onopen = () => {
            // 连接成功
            message.value = '客服小兔已经介入';
            // console.log('WebSocket连接成功')
        }
        // 接收消息
        socket.value.onmessage = (event) => {
            // console.log('WebSocket收到消息：', event.data)
        }
        socket.value.onclose = () => {
            console.log('WebSocket连接关闭')
        }
        socket.value.onerror = (event) => {
            if(event.type === 'error'){
               ElMessage.error('WebSocket连接出错，请检查网络连接')
            }
            console.log('WebSocket连接出错：', event)
        }
    }
    //切换主题
    const updateTheme = () => {
        //获取当前时间
        const currentHour = new Date().getHours()
        // 根据时间设置主题
        theme.value = currentHour < 6 || currentHour >= 19 ? 'dark' : 'light'
    }
    //上传图片
    const uploadImage = (event) => {
        const file = event.target.files[0]
        // 支持多种图片格式的判断
        const validImageTypes = ['image/png', 'image/jpeg', 'image/jpg', 'image/gif'];
        if (file && validImageTypes.includes(file.type)) {
            const reader = new FileReader()
            reader.onload = (e) => {
                // 发送图片的 base64 数据，或可以上传并获取图片链接
                socket.value.send(reader.result); // 发送图片数据
                console.log('用户发送图片：', reader.result);

                // 创建一个新的图片元素，并设置其 src 属性
                const img = document.createElement('img');
                img.src = reader.result;
                img.style.width = '100%';
                img.style.height = '100%';
                //将图片内容显示在 textarea 中
                const textarea = document.getElementById('textarea');
                textarea.value += `IMAGE:${reader.result}\n`; 
                document.getElementById('textarea').appendChild(img);
                //将数据存储到 textarea 中
                textareaContent.value.push(reader.result)
            }
            // 读取文件内容
            reader.readAsDataURL(file)
        }
    }
    //发送图片
    const sendImage = (img) => {
        // 发送图片的 base64 数据，或可以上传并获取图片链接
        //发送图片和数据
        serverMessage.value.push(img) // 存储图片数据
}
    //定义一个常量，用于判断是否是表情
    const EMOJI_REG = /^[\u{1F600}-\u{1F64F}]/u;
    //判断表情
    const isEmoji = (EMOJI_REG) => {
        //判断是否是表情
        return EMOJI_REG
    }
    //判断是否是图片
    const isImg = (item=[]) => {
        //判断是否是图片
        return item.includes('IMAGE:')
    }
    return {
        sendImage,
        isEmoji,
        isImg,
        textareaContent,
        imageSrc,
        time,
        serverMessage,
        message,
        socket,
        connect,
        theme,
        updateTheme,
        uploadImage
    }
})